<div class="mat-paginator-outer-container" *ngIf="vm$ | async as vm">
  <div class="mat-paginator-container">
    <div class="mat-paginator-page-size">
      <div class="mat-paginator-page-size-label">
        Items per page
      </div>

      <mat-form-field
        *ngIf="vm.pageSizeOptions.length > 1"
        class="mat-paginator-page-size-select">
        <mat-select
          [value]="vm.pageSize"
          (selectionChange)="changePageSize($any($event).value)">
          <mat-option *ngFor="let pageSizeOption of vm.pageSizeOptions" [value]="pageSizeOption">
            {{pageSizeOption}}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <div
        class="mat-paginator-page-size-value"
        *ngIf="vm.pageSizeOptions.length <= 1">{{vm.pageSize}}</div>
    </div>

    <div class="mat-paginator-range-actions">
      <div class="mat-paginator-range-label">
        {{vm.rangeLabel}}
      </div>

      <button mat-icon-button type="button"
              class="mat-paginator-navigation-first"
              (click)="setPageIndex(0)"
              matTooltip="First page"
              [matTooltipDisabled]="!vm.hasPreviousPage"
              [matTooltipPosition]="'above'"
              [disabled]="!vm.hasPreviousPage">
        <svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
          <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/>
        </svg>
      </button>
      <button mat-icon-button type="button"
              class="mat-paginator-navigation-previous"
              (click)="setPageIndex(vm.pageIndex - 1)"
              [attr.aria-label]="'Previous Page'"
              [matTooltip]="'Previous Page'"
              [matTooltipDisabled]="!vm.hasPreviousPage"
              [matTooltipPosition]="'above'"
              [disabled]="!vm.hasPreviousPage">
        <svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
          <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
        </svg>
      </button>
      <button mat-icon-button type="button"
              class="mat-paginator-navigation-next"
              (click)="setPageIndex(vm.pageIndex + 1)"
              [attr.aria-label]="'Next Page'"
              [matTooltip]="'Next Page'"
              [matTooltipDisabled]="!vm.hasNextPage"
              [matTooltipPosition]="'above'"
              [disabled]="!vm.hasNextPage">
        <svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
          <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
        </svg>
      </button>
      <button mat-icon-button type="button"
              class="mat-paginator-navigation-last"
              (click)="lastPage()"
              [attr.aria-label]="'Last Page'"
              [matTooltip]="'Last Page'"
              [matTooltipDisabled]="!vm.hasNextPage"
              [matTooltipPosition]="'above'"
              [disabled]="!vm.hasNextPage">
        <svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
          <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/>
        </svg>
      </button>
    </div>
  </div>
</div>